<template>
  <div class="disaster-number">
    <el-carousel
      ref="carouselRef"
      direction="horizontal"
      indicator-position="none"
      arrow="never"
      :autoplay="true"
      :interval="3000"
      height="130px"
      @change="lisChange"
    >
      <el-carousel-item v-for="item in 1" :key="item">
        <div class="disater-main" @click="clickCon(onePage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ onePage.name }}</span>
              <span class="disaster-number-num">{{ onePage.count }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{onePage.level}}级</div>
        </div>
        <div class="disater-main" @click="clickCon(onePage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ onePage.name }}</span>
              <span class="disaster-number-num">{{ onePage.counts }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{onePage.levels}}级</div>
        </div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <div class="disater-main" @click="clickCon(twoPage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ twoPage.name }}</span>
              <span class="disaster-number-num">{{ twoPage.count }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{twoPage.level}}级</div>
        </div>
        <div class="disater-main" @click="clickCon(twoPage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ twoPage.name }}</span>
              <span class="disaster-number-num">{{ twoPage.counts }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{twoPage.levels}}级</div>
        </div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <div class="disater-main"  @click="clickCon(threePage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ threePage.name }}</span>
              <span class="disaster-number-num">{{ threePage.count }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{threePage.level}}级</div>
        </div>
        <div class="disater-main"  @click="clickCon(threePage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ threePage.name }}</span>
              <span class="disaster-number-num">{{ threePage.counts }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{threePage.levels}}级</div>
        </div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <div class="disater-main"  @click="clickCon(fourPage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ fourPage.name }}</span>
              <span class="disaster-number-num">{{ fourPage.count }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{fourPage.level}}级</div>
        </div>
        <div class="disater-main"  @click="clickCon(fourPage)">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ fourPage.name }}</span>
              <span class="disaster-number-num">{{ fourPage.counts }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">{{fourPage.levels}}级</div>
        </div>
      </el-carousel-item>
      <!-- <el-carousel-item v-for="item in 1" :key="item">
        <div class="disater-main">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ fivePage.name }}</span>
              <span class="disaster-number-num">{{ fivePage.count }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">I级</div>
        </div>
        <div class="disater-main">
          <div class="disaster-number-item">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">{{ fivePage.name }}</span>
              <span class="disaster-number-num">{{ fivePage.counts }} <font>个</font></span>
            </div>
          </div>
          <div class="disater-number-des">II级</div>
        </div>
      </el-carousel-item> -->
    </el-carousel>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
const props = defineProps({
  listData: {
    default: [],
    type: Array,
  },
});
const emit = defineEmits(['targetClickVal','changeVal']);
let onePage = ref({});
let twoPage = ref({});
let threePage = ref({});
let fourPage = ref({});
let fivePage = ref({});
let sixPage = ref({});
let sevenPage = ref({});
let eightPage = ref({});

const { listData } = toRefs(props);
function clickCon(val){
  emit('targetClickVal', val);
}
function lisChange(index){
  emit('changeVal', index);
}
onMounted(() => {
  watch(
    () => props.listData,
    () => {
      listData.value.forEach((v, i) => {
        if (v.type == '0') {
          onePage.value.name = '学校';
          if (v.level == '0') {
            onePage.value.count = v.count;
            onePage.value.level = 'I'
          }
          if (v.level == '1') {
            onePage.value.counts = v.count;
            onePage.value.levels = 'II'
          }
        }
        if (v.type == '1') {
          twoPage.value.name = '医院';
          if (v.level == '0') {
            twoPage.value.count = v.count;
            twoPage.value.level = 'I'
          }
          if (v.level == '1') {
            twoPage.value.counts = v.count;
            twoPage.value.levels = 'II'
          }
        }
        if (v.type == '2') {
          threePage.value.name = '生命线';
          if (v.level == '0') {
            threePage.value.count = v.count;
            threePage.value.level = 'I'
          }
          if (v.level == '1') {
            threePage.value.counts = v.count;
            threePage.value.levels = 'II'
          }
        }
        if (v.type == '3') {
          fourPage.value.name = '重大工程';
          if (v.level == '0') {
            fourPage.value.count = v.count;
            fourPage.value.level = 'I'
          }
          if (v.level == '1') {
            fourPage.value.counts = v.count;
            fourPage.value.levels = 'II'
          }
        }
        // if (v.type == '4') {
        //   fivePage.value.name = '重点目标';
        //   if (v.level == '0') {
        //     fivePage.value.count = v.count;
        //   }
        //   if (v.level == '1') {
        //     fivePage.value.counts = v.count;
        //   }
        // }
      });
    },
    { deep: true, immediate: true }
  );
});
</script>
<style lang="scss" scoped>
.el-carousel {
  width: 450px;
}
.el-carousel__container {
  width: 100%;
  display: flex;
}
.el-carousel__item {
  width: 450px;
  display: flex;
  justify-content: center;
}
.disaster-number {
  display: flex;
  height: 140px;
  flex-wrap: wrap;
  justify-content: space-around;
  .disaster-number-item {
    width: 210px;
    height: 95px;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
    color: #ffffff;

    margin-left: 5px;
    margin-bottom: 10px;
  }
  &-panel {
    width: 105px;
    height: 95px;
    margin-left: 105px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .disaster-number-title {
      display: block;
      background-size: 100% 100%;
      background-image: url(/src/assets/images/dzzh/bgbox.png);
      text-align: center;
      width: 85px;
      height: 24px;
      font-size: 12px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #25ffaf;
      line-height: 23px;
    }
    .disaster-number-num {
      display: flex;
      align-items: center;
      text-align: center;
      padding: 0 10px;
      margin-bottom: -10px;
      width: 60px;
      height: 30px;
      font-size: 30px;
      font-family: DS-Digital-Normal, DS-Digital;
      font-weight: normal;
      color: #25ffaf;
      line-height: 40px;
      -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
      font {
        width: 14px;
        height: 14px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #25ffaf;
        line-height: 23px;
        padding: 0 4px;
        box-sizing: border-box;
      }
    }
  }
}

.disater-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.disater-main:nth-child(1) {
  .disaster-number-item {
    background-size: 100% 100%;
    background-image: url(/src/assets/images/risk/bg_cyan.png);
  }
  .disater-number-des {
    width: 70px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/risk/bg_smallcyan.png);
  }
  .disaster-number-title {
    color: #25ffaf;
  }
}
.disater-main:nth-child(2) {
  .disaster-number-item {
    background-size: 100% 100%;
    background-image: url(/src/assets/images/risk/bg_blue.png);
  }
  .disater-number-des {
    width: 70px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/risk/bg_smallblue.png);
  }
  .disaster-number-title {
    color: #46ffff;
  }
  .disaster-number-num {
    color: #46ffff;
  }
}
</style>
